<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'
    const searchContent = ref('');
	const currentTabIndex = ref(0);
	const tabsData = [
	  {
	    text: '全部',
	    badgeConfig: {
	    },
	  },
	  {
	    text: '使用中',
	    badgeConfig: {
	    },
	  },
	  {
	    text: '订单暂停',
	    badgeConfig: {
	      dot: true,
	    },
	  },
	  {
	    text: '已解约',
	  },
	];
	const orderData = ref({});
    onMounted(() => {
		orderData.value['0'] = [{
			"orderNo": "1234567890",
			"orderStatus": "订单暂停",
			"orderType": "橙艺·架子鼓（1-3）",
			"studentName": "吴老六",
			"cellPhone": "13955170653",
			"orderCreateTime": "2022-12-34 11:33:24",
			"executeTimes": "12",
			"totalAmount": "￥1536.00"
		},
		{
			"orderNo": "1234567890",
			"orderStatus": "订单暂停",
			"orderType": "橙艺·架子鼓（1-3）",
			"studentName": "吴老六",
			"cellPhone": "13955170653",
			"orderCreateTime": "2022-12-34 11:33:24",
			"executeTimes": "12",
			"totalAmount": "￥1536.00"
		}];
		orderData.value['1'] = [{
			"orderNo": "4321455668",
			"orderStatus": "使用中",
			"orderType": "橙艺·架子鼓（3-10）",
			"studentName": "刘邦",
			"cellPhone": "13755170653",
			"orderCreateTime": "2023-12-34 11:33:24",
			"executeTimes": "12",
			"totalAmount": "￥2536.00"
		}];
    });
</script>

<template>
	<view class="page">
		<view class="top_box"></view>
		<view class="search_box tn-flex-row">
			<input class="search_input" v-model="searchContent" placeholder="请输入您要搜索的订单号和手机号"  />
			<button class="search_button">搜索</button>
		</view>
		<view class="tabs_box">
			<TnTabs v-model="currentTabIndex" :scroll="false" :bar="true" :bar-color="white">
				<TnTabsItem
				  v-for="(item, index) in tabsData"
				  :key="index"
				  :title="item.text"
				  :badge-config="item.badgeConfig"
				/>
			</TnTabs>
		</view>

		<view class="order_list_box">
			<view class="order_item tn-flex-column" v-for="(item,index) in orderData[currentTabIndex.toString()]">
				<view class="order_no tn-flex-start-between item_row">
					<div class="tn-flex-row">
						<div>订单编号：</div>
						<div>{{item.orderNo}}</div>
					</div>
					<div class="tn-flex-center">
						<div class="dot"></div>
						<div class="order_status">{{item.orderStatus}}</div>
					</div>
				</view>
				<view class="order_type tn-flex-row item_row">
					<div>{{item.orderType}}</div>
				</view>
				<view class="tn-flex-row tn-flex-start-between item_row">
					<div>用户名称</div>
					<div>{{item.studentName}}</div>
				</view>
				<view class="tn-flex-row tn-flex-start-between item_row">
					<div>联系电话</div>
					<div>{{item.cellPhone}}</div>
				</view>
				<view class="tn-flex-row tn-flex-start-between item_row">
					<div>创建订单时间</div>
					<div>{{item.orderCreateTime}}</div>
				</view>
				<view class="tn-flex-row tn-flex-start-between item_row">
					<div>执行次数</div>
					<div>{{item.executeTimes}}</div>
				</view>
				<view class="tn-flex-row tn-flex-start-between item_row">
					<div>授权金额/元</div>
					<div class="amount">{{item.totalAmount}}</div>
				</view>
				<view class="tn-flex-row tn-flex-start-between item_button_row">
					<div>查看履约</div>
					<div>订单恢复</div>
					<div>取消订单</div>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.page{
		background-color: rgb(242, 241, 246);
	}
	.top_box {
		background-color:rgb(25, 141, 228);
		padding-top: 90rpx;
		height: 180rpx;
		width: 100%;
		position: relative;
	}
	.search_box{
		padding-left: 15rpx;
		padding-right: 15rpx;
		.search_input{
			background-color: rgb(230, 230, 230);
			width: 80%;
			margin-top: 15rpx;
			height: 50px;
			border-top-left-radius: 8rpx;
			border-bottom-left-radius: 8rpx;
		}
		.search_button{
			margin-top: 15rpx;
			height: 50px;
			background-color:rgb(25, 141, 228);
			color: white;
			width: 20%;
			border-top-right-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
		}
	}
	.tabs_box{
		// padding-bottom: 20rpx;
	}
	.order_list_box{
		margin-top: 30rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		.order_item{
			color: rgb(108, 108, 108);
			background-color: white;
			height: auto;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			padding: 15rpx;
			.item_row{
				padding: 8rpx 0rpx 8rpx 0rpx;
				.dot{
					width: 10rpx;
					height: 10rpx;
					border-radius: 5rpx;
					background-color: rgb(25, 141, 228);
					margin-right: 10rpx;
				}
				.order_status{
					color: rgb(25, 141, 228);
				}
				.amount{
					color: rgb(238, 137, 122);
				}
			}
			.item_button_row{
				padding: 28rpx 30rpx 18rpx 30rpx;
				font-weight: bold;
			}
		}
	}
</style>
